<template>
  <div class="home">
    <NavBar>
      <i class="fa fa-th-large" slot="scan-code" @click="toClassifyPage"></i>
      <input v-model="keyword" type="text" placeholder="请输入搜索内容" slot="search" @keyup.enter="search(keyword)">
      <i :class="{active: isActive,noActive: !isActive}"  @click="toLogin" class="fa fa-user-circle-o" slot="login"></i>
    </NavBar>
    <Banner :bannerList="bannerList"></Banner>
    <HomeArticles></HomeArticles>
  </div>
</template>

<script>
import NavBar from "../../components/navbar/NavBar";
import Banner from "../../components/banner/Banner";
import HomeHotspot from "./ClassifyArticles";
import HomeArticles from "./HomeArticles";
export default {
  name: "Home",
  components: {
    NavBar,
    Banner,
    HomeHotspot,
    HomeArticles
  },
  data(){
    return{
      bannerList: [
        '/img/banner1.jpg',
        '/img/banner2.jpg',
        '/img/banner3.jpg',
        '/img/banner4.jpg',
      ],
      isActive: false,
      keyword: ''
    }
  },
  methods: {
    //去分类页面
    toClassifyPage(){
      this.$router.push('/classify');
    },
    //登录
    toLogin(){
      if(sessionStorage.getItem('username')){
        //已登录，跳转我的页面
        this.$router.push('/personal');
      }else{
      //  否则跳转到登录页面
        this.$router.push('/login');
      }
    },
    //加载首页时，请求数据
    getArticleData(){
      this.axios.get(`${process.env.VUE_APP_URL}/findAll`,{
        params: {
          start: 0,
          end: 9
        }
      }).then((res)=>{
            //把最后一条信息的索引存储到session中
            sessionStorage.setItem('end','9');
            this.$bus.$emit('articleData',res.data.result);
          }).catch((err)=>{
        console.log(err);
      })
    },
    //搜索功能
    search(keyword){
     // console.log(keyword);
      //this.$bus.$emit('keyword',keyword);
      sessionStorage.setItem('keyword',keyword);
      this.$router.push({
        name: 'search',
        params: {
          keyword: keyword
        }
      });
    }
  },
  created() {
    //判断是否已登录
    if (sessionStorage.getItem('username')){
      this.isActive = true;
    };
    this.getArticleData();
  }
}
</script>

<style scoped>
  .home{
  }
  .active{
    color: red;
  }
  .noActive{
    color: #AAAAAA;
  }
</style>